<template>
  <div>
    <van-nav-bar title="检测历史" left-text="返回" left-arrow @click-left="backAction"/>

    <div class="newSurvey" @click="$router.push('/famList')">
      <span id="title">新的检测</span>
      <span id="icon">+</span>
    </div>

    <van-cell v-if="que_list.length===0" title="尚无检测，去添加一个吧！"/>

    <van-cell v-for="fam in que_list" :key="fam" @click="goToAnsResult(fam.index)"
              title-style="margin-top:-10px;margin-left: -20px" :border="true">

      <span slot="icon"> {{ fam.fam_name }} </span>

      <span slot="title"> {{ fam.survey_date }}<br/> {{ fam.fam_age }}</span>

      <van-tag slot="right-icon" v-if="fam.survey_result===2" color="red">高</van-tag>
      <van-tag slot="right-icon" v-else-if="fam.survey_result===1" color="orange">中</van-tag>
      <van-tag slot="right-icon" v-else-if="fam.survey_result===0" color="green">低</van-tag>

    </van-cell>

  </div>
</template>

<script>
import Vue from "vue"
import {Card, Cell, NavBar, Tag} from "vant"
import axios from "axios";

Vue.use(NavBar)
Vue.use(Card)
Vue.use(Cell)
Vue.use(Tag)
export default {
  name: "queList",
  data() {
    return {
      openid: null,
      que_list: []
    }
  },
  created() {
    let that = this;
    this.openid = this.$route.query.openid;

    sessionStorage.setItem("openid", this.openid);

    if (this.$route.query.is_simple === '1') {
      sessionStorage.setItem("is_simple", '1');
      this.$router.push({
        name: "selQuestion"
      })
    }
    axios.get("http://qcjc.caulife.top/api/v1/getRecord", {
      params: {
        openid: that.openid
      }
    }).then(
        function (res) {
          that.que_list = res.data;
        }
    )
  },
  methods: {
    backAction() {
      history.back();
    },
    goToAnsResult(index) {
      let that = this;
      const que_info = that.que_list[index];
      sessionStorage.setItem("respondent_id", que_info.fam_id);
      sessionStorage.setItem("respondent_name", que_info.fam_name);
      sessionStorage.setItem("respondent_birth", que_info.fam_birth);
      sessionStorage.setItem("respondent_age", que_info.fam_age);
      sessionStorage.setItem("survey_date", que_info.survey_date);


      that.$router.push({
        name: "queResult",
        query: {
          survey_answer: que_info.survey_answer.split(","),
          survey_point: que_info.survey_point.split(",")
        }
      })
    }
  }

}
</script>

<style scoped>


.newSurvey {
  text-autospace: ideograph-space;
  font-size: 20px;

  margin: 5px 20px 20px 20px;

  color: aliceblue;
  background: orange;
  height: 40px;
}

.newSurvey #title {
  float: left;
  margin-left: 20px;
  margin-top: 6px;
  text-align: left;
}

.newSurvey #icon {
  float: right;
  margin-right: 20px;
  font-size: xx-large;
}

</style>